import { ref, reactive, onMounted, onUnmounted } from 'vue'

/**
 * 数据,事件,生命周期抽取出来
 * 抽象局部
 */
export default function () {
    let point = reactive({ x: 0, y: 0 })
    // 点击事件处理函数
    const handleClick = (event) => {
        point.x = event.pageX
        point.y = event.pageY
        console.log(`点击坐标: x=${event.pageX}, y=${event.pageY}`)
    }

    onMounted(() => {
        // 添加点击事件监听
        window.addEventListener('click', handleClick)
        console.log('点击事件监听已添加')
    })

    // 添加卸载时的清理
    onUnmounted(() => {
        window.removeEventListener('click', handleClick)
        console.log('点击事件监听已移除')
    })
    return point
}